/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2021/2/5 9:55 上午
 * @version V1.0
 */
import React, { useState } from 'react';
import styles from './index.less';
import { Radio } from 'antd';
import SectionTitle from 'components/SectionTitle';
import AddSomeButton from 'components/AddSomeButton';
import { connect } from 'umi';
import Tab1 from '@/pages/teaching-quality/compute-scheme/components/tab1';
import Tab2 from '@/pages/teaching-quality/compute-scheme/components/tab2';
import Tab3 from '@/pages/teaching-quality/compute-scheme/components/tab3';
import Tab4 from '@/pages/teaching-quality/compute-scheme/components/tab4';
import Tab5 from '@/pages/teaching-quality/compute-scheme/components/tab5';

const ComputeScheme = ({ dispatch }) => {
    const [tabVal, setTabVal] = useState('1');
    const [title, setTitle] = useState('四位权重方案设置');
    const tabSelect = (v) => {
        const tabVal = v.target.value;
        setTabVal(tabVal);
        switch (tabVal) {
            case '1':
                setTitle('四位权重方案设置');
                break;
            case '2':
                setTitle('部系、教研室评价等级比例设置');
                break;
            case '3':
                setTitle('职称等级优秀比例设置');
                break;
            case '4':
                setTitle('合格等级确定条件设置');
                break;
            case '5':
                setTitle('不合格等级确定条件设置');
                break;
            default:
                setTitle('四位权重方案设置');
                break;
        }
    };
    const addItem1 = item => {
        dispatch({
            type: 'computeScheme/setTab1Show',
            payload: true,
        });
        dispatch({
            type: 'computeScheme/setItem1Data',
            payload: item,
        });
    };


    const addItem2 = item => {
        dispatch({
            type: 'computeScheme/setTab2Show',
            payload: true,
        });
        dispatch({
            type: 'computeScheme/setItem2Data',
            payload: item,
        });
    };

    const addItem3 = item => {
        dispatch({
            type: 'computeScheme/setTab3Show',
            payload: true,
        });
        dispatch({
            type: 'computeScheme/setItem3Data',
            payload: item,
        });
    };

    const addItem4 = item => {
        dispatch({
            type: 'computeScheme/setTab4Show',
            payload: true,
        });
        dispatch({
            type: 'computeScheme/setItem4Data',
            payload: item,
        });
    };

    const addItem5 = item => {
        dispatch({
            type: 'computeScheme/setTab5Show',
            payload: true,
        });
        dispatch({
            type: 'computeScheme/setItem5Data',
            payload: item,
        });
    };


    return (
        <div className={styles.pageContainer}>
            <div style={{ marginBottom: '10px' }}>
                <Radio.Group size="large" value={tabVal} onChange={tabSelect}>
                    <Radio.Button value="1">四位权重方案设置</Radio.Button>
                    <Radio.Button value="2">部系、教研室评价等级比例设置</Radio.Button>
                    <Radio.Button value="3">职称等级优秀比例设置</Radio.Button>
                    <Radio.Button value="4">合格等级确定条件设置</Radio.Button>
                    <Radio.Button value="5">不合格等级确定条件设置</Radio.Button>
                </Radio.Group>
            </div>
            {
                tabVal === '1' ? (
                    <div className={styles.pageContainerHeader}>
                        <SectionTitle title={title}/>
                        <div className={styles.btnGroup}>
                            <div style={{ width: '220px' }} onClick={() => addItem1({})}>
                                <AddSomeButton title={'添加四位权重方案'}/>
                            </div>
                        </div>
                    </div>
                ) : null
            }
            {
                tabVal === '2' ? (
                    <div className={styles.pageContainerHeader}>
                        <SectionTitle title={title}/>
                        <div className={styles.btnGroup}>
                            <div style={{ width: '220px' }} onClick={() => addItem2({})}>
                                <AddSomeButton title={'添加单位评价等级比例设置'}/>
                            </div>
                        </div>
                    </div>
                ) : null
            }
            {
                tabVal === '3' ? (
                    <div className={styles.pageContainerHeader}>
                        <SectionTitle title={title}/>
                        <div className={styles.btnGroup}>
                            <div style={{ width: '220px' }} onClick={() => addItem3({})}>
                                <AddSomeButton title={'添加各职称优秀比例设置'}/>
                            </div>
                        </div>
                    </div>
                ) : null
            }
            {
                tabVal === '4' ? (
                    <div className={styles.pageContainerHeader}>
                        <SectionTitle title={title}/>
                        <div className={styles.btnGroup}>
                            <div style={{ width: '220px' }} onClick={() => addItem4({})}>
                                <AddSomeButton title={'添加合格等级确定条件设置'}/>
                            </div>
                        </div>
                    </div>
                ) : null
            }
            {
                tabVal === '5' ? (
                    <div className={styles.pageContainerHeader}>
                        <SectionTitle title={title}/>
                        <div className={styles.btnGroup}>
                            <div style={{ width: '220px' }} onClick={() => addItem5({})}>
                                <AddSomeButton title={'添加不合格等级确定条件设置'}/>
                            </div>
                        </div>
                    </div>
                ) : null
            }
            {
                tabVal === '1' ? <Tab1/> : null
            }
            {
                tabVal === '2' ? <Tab2/> : null
            }
            {
                tabVal === '3' ? <Tab3/> : null
            }
            {
                tabVal === '4' ? <Tab4/> : null
            }
            {
                tabVal === '5' ? <Tab5/> : null
            }
        </div>
    );
};

export default connect(({ dispatch }) => ({
    dispatch,
}))(ComputeScheme);
